<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>

    <style>
        .container {
            display: flex;
            flex-wrap: wrap;
        }

        .item {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-right: 20px;
            margin-bottom: 20px;
            width: 300px;
            height: 200px;
            border: 1px dashed #ccc;
        }

        .upload_progress {
            display: none;
            position: relative;
            margin-top: 10px;
            width: 200px;
            height: 3px;
            border-radius: 3px;
            background: rgb(206, 195, 195);
            overflow: hidden;
        }

        .upload_tip {
            font-size: 12px;
        }

        .progress {
            position: absolute;
            /* width: 30%; */
            height: 3px;
            border-radius: 3px;
            background-color: green;
        }

        button {
            width: 100px;
            height: 40px;
        }
    </style>

    <body>
        <div class="container">
            <div class="item">
                <h3>单一文件上传 [FORM-DATA]</h3>
                <section id="upload1">
                    <input
                        type="file"
                        accept=".png,.jpg"
                        class="upload_ipt"
                        style="display: none"
                    />
                    <!-- 自己文件的按钮,来触发选择图片 -->
                    <div>
                        <button class="upload_button select">选择文件</button>
                        <button class="upload_button upload">
                            上传到服务器
                        </button>
                    </div>
                    <div class="upload_tip">大小不能超过2ＭＢ</div>
                    <ul class="upload_list"></ul>
                </section>
            </div>

            <div class="item">
                <h3>单一文件上传 [BASE64]</h3>
                <section id="upload2">
                    <input
                        type="file"
                        accept=".png,.jpg"
                        class="upload_ipt"
                        style="display: none"
                    />
                    <!-- 自己文件的按钮,来触发选择图片 -->
                    <div>
                        <button class="upload_button select">
                            选择图片上传
                        </button>
                    </div>
                </section>
            </div>

            <div class="item">
                <h3>单一文件上传 [缩略图]</h3>
                <section id="upload3">
                    <input
                        type="file"
                        accept=".png,.jpg"
                        class="upload_ipt"
                        style="display: none"
                    />
                    <!-- 自己文件的按钮,来触发选择图片 -->
                    <div>
                        <button class="upload_button select">选择文件</button>
                        <button class="upload_button upload">
                            上传到服务器
                        </button>
                    </div>
                    <div class="upload_abber">
                        <img
                            src=""
                            alt=""
                            style="width: 100px; height: 100px; display: none"
                        />
                    </div>
                </section>
            </div>

            <div class="item">
                <h3>单一文件上传 [进度条管控]</h3>
                <section id="upload4">
                    <input
                        type="file"
                        accept=".png,.jpg"
                        class="upload_ipt"
                        style="display: none"
                    />
                    <!-- 自己文件的按钮,来触发选择图片 -->
                    <div>
                        <button class="upload_button select">选择文件</button>
                    </div>
                    <div class="upload_progress">
                        <div class="progress"></div>
                    </div>
                </section>
            </div>

            <div class="item">
                <h3>多文件上传 [FORM-DATA]</h3>
                <section id="upload5">
                    <input
                        type="file"
                        accept=".png,.jpg"
                        multiple
                        class="upload_ipt"
                        style="display: none"
                    />
                    <!-- 自己文件的按钮,来触发选择图片 -->
                    <div>
                        <button class="upload_button select">选择文件</button>
                        <button class="upload_button upload">
                            上传到服务器
                        </button>
                    </div>
                    <ul class="upload_list"></ul>
                </section>
            </div>

            <div class="item" id="dragBox">
                <h3>拖拽上传 [FORM-DATA]</h3>
                <section id="upload6">
                    <input
                        type="file"
                        accept=".png,.jpg"
                        multiple
                        class="upload_ipt"
                        style="display: none"
                    />
                    <div class="upload-box">
                        <span>将文件拖到此处,或</span>
                        <span
                            id="upload-button"
                            style="color: rgb(58, 58, 193); cursor: pointer"
                            >点击上传</span
                        >
                    </div>
                </section>
            </div>

            <div class="item">
                <section id="upload7">
                    <h3>大文件上传 [FORM-DATA]</h3>
                    <input
                        type="file"
                        class="upload_ipt"
                        style="display: none"
                    />
                    <div>
                        <button class="upload_button select">选择文件</button>
                        <button class="upload_button upload">开始上传</button>
                    </div>
                    <div class="upload_progress">
                        <div class="progress"></div>
                    </div>
                </section>
            </div>
        </div>
        <script src="node_modules/axios/dist/axios.min.js"></script>
        <script src="node_modules/qs/dist/qs.js"></script>
        <script src="node_modules/spark-md5/spark-md5.min.js"></script>
        <script src="./src/js/utils.js"></script>
        <script src="./src/js/instance.js"></script>
        <script src="./src/js/upload.js"></script>
    </body>
</html>
